<script setup lang="ts">
  import { useSkeleton } from '@/hooks/arco/useSkeleton';
  import { watch } from 'vue';
  import { queryElderDrugStock } from '@/api/medication-management/drug-inventory';

  const props = withDefaults(
    defineProps<{
      elderId: string;
    }>(),
    {}
  );

  const renderStockStatus = (item: any) => {
    const { stockNum, alarmStock } = item;

    if (stockNum < alarmStock) {
      return {
        status: 'yellow',
        text: '库存不足',
      };
    }
    if (stockNum === 0) {
      return {
        status: 'yellow',
        text: '库存清空',
      };
    }
    return {
      status: 'green',
      text: '库存充足',
    };
  };

  const drugSkeleton = useSkeleton({
    immediate: false,
    apiFun: queryElderDrugStock,
    transformDataFun(data) {
      data.forEach((element: any) => {
        const { status, text } = renderStockStatus(element);
        element.stockStatus = status;
        element.stockText = text;
      });
      return data;
    },
  });

  watch(
    () => props.elderId,
    (newVal) => {
      if (newVal) {
        drugSkeleton.execute(newVal);
      }
    },
    {
      immediate: true,
    }
  );

  // const alertSupplement = () => {};
</script>

<template>
  <div class="col gap-2 h-full overflow-y-auto">
    <h2 class="text-lg mb-2 font-medium tracking-wide">库存详情</h2>

    <skeleton-view
      v-slot="{ data }"
      class="flex-1"
      v-bind="drugSkeleton.bindProps"
    >
      <div class="flex flex-wrap gap-6">
        <div
          v-for="(item, index) in data"
          :key="index"
          class="drug-card shadow col px-4 py-3"
        >
          <span class="flex justify-between items-end">
            <span class="name truncate">{{ item.drugName }}</span>
            <!-- TODO: 库存预警状态显示 -->
            <span :class="['text-nowrap', `status-${item.stockStatus}`]">
              {{ item.stockText }}
            </span>
          </span>
          <a-divider margin="0.5rem" />
          <span>
            <span>药品类型：</span>
            <span>{{ item.drugTypeLabel }}</span>
          </span>
          <span>
            <span>药品规格：</span>
            <span>{{ item.specifications }}</span>
          </span>

          <span class="truncate">
            <span>生产厂家：</span>
            <span :title="item.companyName">
              {{ item.companyName }}
            </span>
          </span>

          <span>
            <span>库存总量：</span>
            <span>{{ item.stockNum }}{{ item.stockUnit }}</span>
          </span>
          <span>
            <span>预警值：</span>
            <span>{{ item.alarmStock }}{{ item.stockUnit }}</span>
          </span>
          <!-- <a-divider margin="0.5rem" />
          <a-space class="self-end">
            <a-button type="outline" size="mini" @click="alertSupplement">
              通知送药
            </a-button>
          </a-space> -->
        </div>
      </div>
    </skeleton-view>
  </div>
</template>

<style lang="less" scoped>
  .drug-card {
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    font-size: 12px;
    width: 230px;

    .name {
      font-size: 14px;
    }

    .status-green {
      color: #00b42a;
    }

    .status-yellow {
      color: #f9cc45;
    }

    span {
      font-size: 13px;
    }
  }
</style>
